﻿@using zy_simu.Data
@inherits DisplayPanel

<style>
    @@font-face {
        font-family: "UnidreamLED";
        src: url("../css/open-iconic/font/fonts/UnidreamLED.woff") format("woff");
    }

    #div_panel_bk {
        position: relative;
        /*border: 1px solid #000;*/
        width: @($"{panel_w}px");
        height: @($"{panel_h}px");
        background-color: #282828;
        overflow: hidden;
        margin: 5px;
        border-radius: 10px;
    }

    .div_panel_frame {
        position: relative;
        margin: 5px;
        width: @($"{panel_w - 12}px");
        height: @($"{panel_h - 12}px");
        overflow: hidden;
        border: 1px solid dimgrey;
    }

    .div_led_icons {
        position: absolute;
        width: @($"{icon_w}px");
        height: @($"{icon_h}px");
        line-height: @($"{icon_h}px");
        text-align: center;
        font-size: @($"{icon_w - 2}px");
    }

    .div_led_dot {
        position: absolute;
        width: @($"{digital_w}px");
        height: @($"{digital_h}px");
        line-height: @($"{digital_h}px"); /*设置内部文字的行高等于div高度，可以使文字垂直居中*/
        text-align: center;
        font-family: Arial;
        font-size: @($"{digital_h}px");
    }

    .div_led_7_seg {
        position: absolute;
        width: @($"{digital_w}px");
        height: @($"{digital_h}px");
        line-height: @($"{digital_h}px"); /*设置内部文字的行高等于div高度，可以使文字垂直居中*/
        text-align: center;
        font-family: UnidreamLED;
        font-size: @($"{digital_h}px");
    }

    .div_panel_btn {
        position: absolute;
        width: @($"{button_w}px");
        height: @($"{button_h}px");
        display: flex;
        align-items: center;
        flex-direction: column;
    }

</style>

<div>
    <h5>@title</h5>

    <div id="div_panel_bk" tabindex="1" @onkeydown="HandleKeyUpDown" @onkeyup="HandleKeyUpDown">
        <div class="div_panel_frame">
            @*12个 led icon*@
            @for (int i = 0; i < 12; i++)
            {
                <div class="div_led_icons" style="@GetIconPos(i)">
                    <i class="@GetIconClass(i)" style="@GetIconColor(i)"> </i>
                </div>
            }
            @*负号*@
            <div class="div_led_7_seg" style="@(((disp_buf[dev_snap.led_icon_def[15,0]] & dev_snap.led_icon_def[15,1]) != 0) ? "color:red" : "color:dimgrey"); @GetMinuslPos();"> - </div>
            @*7段LED*@
            @for (int i = 0; i < 3; i++)
            {
                <div class="div_led_7_seg" style="@GetDigitalBKColor(i); @GetDigitalPos(i);"> 8 </div>
                <div class="div_led_7_seg" style="color:red; @GetDigitalPos(i);"> @disp_item_digital[i] </div>
            }
            @*小数点*@
            <div class="div_led_dot" style="@GetDotPos(); @(((disp_buf[dev_snap.led_icon_def[14,0]] & dev_snap.led_icon_def[14,1]) != 0) ? "color:red" : "color:dimgrey")"> . </div>
            @*按键*@
            @for (int i = 0; i < dev_snap.keys_def.Length; i++)
            {
                int idx = i;
                <div class="div_panel_btn" style="@GetButtonPos(i);">
                    <button style="@GetButtonBKColor(i); width: 40px; height: 40px; border-radius: 50%;" @onmousedown='(e) => OnMouseDown(idx)' @onmouseup="(e) => OnMouseUp(idx)">
                        <i class="@GetButtonIcon(i)" style="color:black; "> </i>
                    </button>
                </div>
            }
        </div>
    </div>

    <div>
        <p>@KeyStateString</p>
    </div>

</div>


@code {
    private int pos_k = 3; // 位置计算放大系数

    private const int panel_w = 560;
    private const int panel_h = 140;

    private const int icon_t = 10; // icon top
    private const int icon_l = 10; // icon left
    private const int icon_w = 24; // icon width
    private const int icon_h = 24; // icon height

    private const int digital_w = 65;
    private const int digital_h = 2 * digital_w;

    private const int button_w = 40;
    private const int button_h = 40;

    private const int icon_span = (panel_h - icon_t * 2) / 3 - icon_h;
    private const int digital_span = 10;
    private const int digital_t = 0;
    private const int digital_l = icon_l + (icon_w + icon_span) * 4;
    private const int button_t = 25;
    private const int button_span = (panel_h - button_t * 2) / 2 - button_h;
    private const int button_l = digital_l + (digital_w + digital_span) * 4 - 15 * 2 + 10;

    private string GetIconPos(int i)
    {
        int top = icon_t + (icon_span + icon_w) * (i / 4);
        int left = icon_l + (icon_span + icon_w) * (i % 4);
        string ret = $"top: {top}px; left: {left}px;";
        return ret;
    }
    private string GetDigitalPos(int i)
    {
        int left = digital_l + (digital_span + digital_w) * (i + 1) - 15 * 2;
        return $"top: {digital_t}px; left: {left}px";
    }
    private string GetMinuslPos()
    {
        return $"top: {digital_t}px; left: {digital_l - 15}px"; // minus是字体中的一部分，回调15px
    }
    private string GetDotPos()
    {
        int left = (digital_l + (digital_span + digital_w) * 2 + 33) - 15 * 2; //
        return $"top: {digital_t}px; left: {left}px";
    }
    private string GetButtonPos(int i)
    {
        return $"top: {button_t + (button_w + button_span) * (i / 2)}px; left: {button_l + (button_w + button_span) * (i % 2)}px";
    }
    private string GetDigitalBKColor(int i)
    {
        if (dev_snap.disp_digital_cnt >= (3 - i))
            return "color: dimgrey";
        else
            return "color:black";
    }

    protected override void OnInitialized()
    {
        Init();
        disp_item_digital = new string[3];
        KeyStateString = "按键状态:";
        led_icons_map = new int[] { 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11 };
        led_icons_name = new string[] { "压机灯", "制热灯", "化霜灯", "节能灯", "锁屏灯", "报警灯", "风机灯", "门1灯", "WIFI灯", "4G灯", "电池灯", "蓝牙灯"};
        led_icons_class = new string[] {
            "fas fa-snowflake", "fas fa-mug-hot", "fas fa-cloud-rain", "fas fa-leaf",
            "fas fa-lock", "fas fa-circle-exclamation", "fas fa-fan", "fas fa-door-open",
            "fas fa-wifi", "fas fa-signal", "fas fa-battery-three-quarters", "fas fa-satellite-dish",
        };
        base.OnInitialized();
    }
}

